<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<title>员工主界面</title>
		<link href="http://fonts.googleapis.com/css?family=Nunito:400,600,700,800,900&display=swap" rel="stylesheet">
		<link href="http://fonts.googleapis.com/css?family=Hind&display=swap" rel="stylesheet">
		<!-- //web fonts -->
		<!-- Template CSS -->
		<link rel="stylesheet" href="${pageContext.request.contextPath }/dist/assets/css/style-starter.css">
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style type="text/css">
			#xinxi {
			padding-left:400px ;
				/*margin-left: 400px;*/
				color: white;
				background-color: #171A1D;
			}
		</style>
	</head>

	<body>

		<section class="w3l-bootstrap-header">
			<nav class="navbar navbar-expand-lg navbar-light py-lg-3 py-2">
				<div class="container">
					<a class="navbar-brand" >个人信息</a>
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon fa fa-bars"></span>
      </button>

					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav ml-auto">
							<li class="nav-item">
								<a class="nav-link" href="${pageContext.request.contextPath }/front/mysef.jsp">主界面</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="${pageContext.request.contextPath }/front/services.jsp">查看请假条</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="${pageContext.request.contextPath }/front/leave.jsp">请假申请</a>
							</li>

							<li class="nav-item">
								<a class="nav-link" href="${pageContext.request.contextPath }/front/puchclock.jsp">每日打卡</a>
							</li>
						</ul>

					</div>
				</div>
			</nav>
		</section>
		<!--  Main banner section -->
		<section class="w3l-main-banner" id="home" >
			<div class="companies20-content">
				<div class="companies-wrapper">
					<div class="item">
						<div class="slider-info banner-view text-center">
							<div class="banner-info container" >
								<c:if test="${sessionScope.emp.empPicture != null }">
									<a  data-toggle="modal" data-target="#myModal"><img src="${pageContext.request.contextPath}/EmployeesController?op=getPic&fileName=${sessionScope.emp.empPicture}" alt="about image" class="img-fluid" style="width:150px;heigh:150px" name="empImg" id="empImg" ></a>
								</c:if>
								<c:if test="${sessionScope.emp.empPicture == null }">
									<a  data-toggle="modal" data-target="#myModal"><img src="${pageContext.request.contextPath}/EmployeesController?op=getPic&fileName=labi.jpg" alt="about image" class="img-fluid" style="width:150px;heigh:150px" name="empImg" id="empImg" ></a>
								</c:if>
								<h3 class="banner-text mt-5">欢迎来到员工信息查询界面 </h3>
								
                                <p class="my-4 mb-5">员工:${sessionScope.emp.empName }</p><br>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!--  //Main banner section -->
		<section class="w3l-about ">
			<div class="skills-bars py-5">
				<div class="container py-md-3">
					<div class="heading text-center mx-auto">
						<h3 class="head">公司简介</h3>
						<p class="my-3 head">
							XX产业投资有限公司简称 XX 是一家专业以XXXX产业投资、XXXX为主的高品质XX企业。公司自XXXX年创立以来，一直专业致力于XX产业工程，始终坚持发扬 诚信、创新、沟通”为企业宗旨，以 优质健康、全心服务”为立业之本的团队精神。并形成一套完整的XX、XX、XX、XX、XX一站式服务体系，争取让每一个员工在公司体会到在家的感觉。
						</p>
					</div>

				</div>
			</div>
		</section>

		<form id="xinxi">
			<div class="row mt-5 pt-3">
				<div class="col-lg-4 col-md-4 col-sm-6 skills-bar-grids mb-4 pb-2">
					<span class="label label-success">员工部门</span>
					<p>${sessionScope.emp.dept.deptName}</p>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-6 skills-bar-grids mb-4 pb-2">
					<span class="label label-success">员工工号</span>
					<p>${sessionScope.emp.empId}</p>
				</div>
				
				<div class="col-lg-4  col-md-4 col-sm-6 skills-bar-grids mb-4 pb-2">
					<span class="label label-success">联系方式</span>
					<p>${sessionScope.emp.empPhone }</p>
				</div>
			
				

			</div>
		</form>
		
		<form >
			<section class="w3l-about " >
				<div class="skills-bars py-5">
					<div class="container py-md-3">
						<div class="heading text-center mx-auto">
							<h3 class="head">本月打卡明细</h3>
							<table class="table table-hover" >
							<thead>
								<tr class="info">
										<th>记录ID</th>
										<th>上班打卡时间</th>
										<th>下班打卡时间</th>
										<th>打卡详情</th>
								</tr>
							</thead>
							<tbody id="recordListBody">
									
							</tbody>
                                   
							</table>

						</div>

					</div>
				</div>
			</section>

		</form>
		

		<div class="products-4" id="portfolio">
			<!-- Products4 block -->
			<div id="products4-block" class="text-center">
				<div class="container">
					<div class="heading text-center mx-auto mb-5">
						<h3 class="head">公司员工的工作环境</h3>
						<p class="my-3 head"> 舒适的工作环境可以使人更加放松</p>
					</div>
					<input id="tab1" type="radio" name="tabs" checked>
					<label class="tabtle" for="tab1">展示页一</label>

					<input id="tab2" type="radio" name="tabs">
					<label class="tabtle" for="tab2">展示页二</label>

					<input id="tab3" type="radio" name="tabs">
					<label class="tabtle" for="tab3">展示页三</label>

					<input id="tab4" type="radio" name="tabs">
					<label class="tabtle" for="tab4">展示页四</label>

					<section id="content1" class="tab-content text-left">
						<div class="d-grid grid-col-3">
							<div class="product">
							<p>
							<img src="${pageContext.request.contextPath }/dist/assets/images/g1.jpg" class="img-responsive" alt="" />
							</p>

							</div>
							<div class="product">
							<p>
							<img src="${pageContext.request.contextPath }/dist/assets/images/g2.jpg" class="img-responsive" alt="" />
							</p>
							</div>
								
							<div class="product">
							<p>
							<img src="${pageContext.request.contextPath }/dist/assets/images/g3.jpg" class="img-responsive" alt="" />
							
							</p>
							
							</div>
                            <div class="product">
							<p>
							<img src="${pageContext.request.contextPath }/dist/assets/images/g4.jpg" class="img-responsive" alt="" />
									
							</p>

							</div>
							<div class="product">
							<p>
							<img src="${pageContext.request.contextPath }/dist/assets/images/g5.jpg" class="img-responsive" alt="" />
									
							</p>					

							</div>
							<div class="product">
							<p>
							<img src="${pageContext.request.contextPath }/dist/assets/images/g6.jpg" class="img-responsive" alt="" />
			
							</p>
							</div>
							
							
														

						</div>
					</section>

					<section id="content2" class="tab-content text-left">
						<div class="d-grid grid-col-3">
							<div class="product">
							<p>
							<img src="${pageContext.request.contextPath }/dist/assets/images/g7.jpg" class="img-responsive" alt="" />
									
							</p>

							</div>
							<div class="product">
							<p>
							<img src="${pageContext.request.contextPath }/dist/assets/images/g8.jpg" class="img-responsive" alt="" />									
							</p>
							</div>
							<div class="product">
							<p>
							<img src="${pageContext.request.contextPath }/dist/assets/images/g1.jpg" class="img-responsive" alt="" />
									
							</p>
							</div>
							
							<div class="product">
							<p>
							<img src="${pageContext.request.contextPath }/dist/assets/images/g2.jpg" class="img-responsive" alt="" />		
							</p>								

							</div>
							<div class="product">
							<p>
							<img src="${pageContext.request.contextPath }/dist/assets/images/g3.jpg" class="img-responsive" alt="" />
					
							</p>
							</div>
							
							<div class="product">
							<p>
							<img src="${pageContext.request.contextPath }/dist/assets/images/g4.jpg" class="img-responsive" alt="" />
									
							</p>				

							</div>
						</div>
					</section>

					<section id="content3" class="tab-content text-left">
						<div class="d-grid grid-col-3">
							<div class="product">
<p>
							<img src="${pageContext.request.contextPath }/dist/assets/images/g5.jpg" class="img-responsive" alt="" />
									
							</p>

							</div>
							<div class="product">
							<p>
							<img src="${pageContext.request.contextPath }/dist/assets/images/g6.jpg" class="img-responsive" alt="" />									
							</p>
							</div>
							
							<div class="product">
							<p>
							<img src="${pageContext.request.contextPath }/dist/assets/images/g7.jpg" class="img-responsive" alt="" />								
							</p>								
							</div>
						</div>
					</section>

					<section id="content4" class="tab-content text-left">
						<div class="d-grid grid-col-3">
							<div class="product">
							<p>
							<img src="${pageContext.request.contextPath }/dist/assets/images/g8.jpg" class="img-responsive" alt="" />									
							</p>
							</div>
							<div class="product">
							<p>
							<img src="${pageContext.request.contextPath }/dist/assets/images/g1.jpg" class="img-responsive" alt="" />
									
							</p>

							</div>
						</div>
					</section>
				</div>
			</div>
			<!-- Products4 block -->
		</div>
		<script src="${pageContext.request.contextPath }/dist/assets/js/jquery-3.3.1.min.js"></script>
		<script src="${pageContext.request.contextPath }/dist/assets/js/lightbox-plus-jquery.min.js"></script>
		<section class="services-12" id="experience">
			<div class="form-12-content">
				<div class="container">
					<div class="grid grid-column-2 ">

						<div class="column1">
							<h3 class="mb-5">老员工的经验</h3>
							<div class="experience-top">
								<h5>2018 - now</h5>
								<h4>经验一</h4>
								<p class="my-3 text-white">计划编制等工作；本人严格执行公司设备管理制度，进行对设备薄弱环节改进并与相关车间部门共同商议实施从而得到解决，同年设备管理主要从加强巡检、定检、消除隐患及时排除隐患入手，同时在上班检修、技术改造、提高检修质量等方面加强学习，使设备技术管理工作有所提高。</p>
							</div>
							<div class="experience-top">
								<h5>2014 - 2017</h5>
								<h4>经验二</h4>
								<p class="my-3 text-white">如果我们能以充分的热情去做最平凡的工作，也能成为最精巧的工人；如果以冷淡的态度去做最高尚的工作，也不过是个平庸的工匠。</p>
							</div>
							<div class="experience-top">
								<h5>2010 - 2014</h5>
								<h4>经验三</h4>
								<p class="my-3 text-white">如果一个人领悟了通过全力工作来免除工作中的辛劳的秘诀，那么他也就掌握了达到成功的原理。倘若能处处以主动、努力的精神来工作，那么无论在怎样的岗位上都能丰富他人生的经历。</p>
							</div>
						</div>
						<div class="column2">
							<h3 class="mb-5">部门新规</h3>
							<div class="experience-top">

								<h4>作息规定</h4>
								<p class="my-3 text-white">1.员工上下班施行签到制，上下班均须本人亲自签到，不得托、替他人签到。2.员工上下班考勤记录将作为公司绩效考核的重要组成部分。3. 员工如因事需在工作时间内外出，要向主管经理请示签退后方可离开公司。4.员工遇突发疾病须当天向主管经理请假，事后补交相关证明。5.事假需提前向主管经理提出申请，并填写【请假申请单】，经批准后方可休息。</p>
							</div>
							<div class="experience-top">

								<h4>保密规定</h4>
								<p class="my-3 text-white">1.管理人员须做好公司重要文件的备份及存档工作，并妥善记录网络密码及口令。并向总经理提交完整的网络口令清单。2.员工须严守公司商业机密，妥善保存重要的商业客户资料数据等信息。3.任何时间，员工均不可擅自邀请亲朋好友在公司聚会。4.员工及管理人员均不可向外泄露公司发展计划策略客户资料及其他重要的方案，如一发现，除理解罚款辞退等内部处理外，情节严重的，公司将追究其法律职责。</p>
							</div>
							<div class="experience-top">

								<h4>卫生规范</h4>
								<p class="my-3 text-white">1.员工在公司内接待来访客人，事后需立即清理会客区。2.办公区域内严禁吸烟。3.要爱护办公区域的花木。4.员工须自觉持续公共区域的卫生，发现不清洁的状况，应及时清理。5.正确使用公司内的水电空调等设施，最后离开办公室的员工应关掉空调电灯和一切公司内就应关掉的设施。6.员工须每一天清洁个人工作区内的卫生，确保地面桌面及设备的整洁。</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!-- grids block 5 -->
		<section class="w3l-footer-29-main" id="footer">
			<div class="footer-29 text-center">
				<div class="container">

					<div class="main-social-footer-29">

						<a href="#facebook" class="facebook"><span class="fa fa-facebook"></span></a>
						<a href="#twitter" class="twitter"><span class="fa fa-twitter"></span></a>
						<a href="#instagram" class="instagram"><span class="fa fa-instagram"></span></a>
						<a href="#google-plus" class="google-plus"><span class="fa fa-google-plus"></span></a>
						<a href="#linkedin" class="linkedin"><span class="fa fa-linkedin"></span></a>
					</div>
					<div class="bottom-copies text-center">
						<p class="copy-footer-29">Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>

					</div>
				</div>
			</div>
			<!-- move top -->
			<button onclick="topFunction()" id="movetop" title="Go to top">
              <span class="fa fa-angle-up"></span>
                 </button>
			
			<!-- /move top -->
		</section>
		<!-- // grids block 5 -->
		
		<!-- //footer-28 block -->

		

		<!-- Smooth scrolling -->
		
		<div class="modal fade" id="myModal">
		<div class="modal-dialog">
			<div class="modal-content" >
		
				<!-- 模态框头部 -->
				<div class="modal-header">
					<h4 class="modal-title">修改头像</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
			 <form id="updatePicForm" enctype="multipart/form-data"  method="post">
				<!-- 模态框主体 -->
				<div class="modal-body">
				<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" name="ep" />
				</div>
			</form>
			
				<!-- 模态框底部 -->
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-success" id="btup">确认修改</button>
				</div>
				
			
			</div>
		</div>
	</div>

	</body>
	<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<%--   <script src="${pageContext.request.contextPath }/dist/assets/js/jquery-3.4.1.slim.min.js"></script> --%>
<%-- <script src="${pageContext.request.contextPath }/dist/assets/js/jquery-3.3.1.min.js"></script> --%>
		<script src="${pageContext.request.contextPath }/dist/assets/js/bootstrap.min.js"></script>
	<script>
				// When the user scrolls down 20px from the top of the document, show the button
				window.onscroll = function() {
					scrollFunction()
				};

				function scrollFunction() {
					if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
						document.getElementById("movetop").style.display = "block";
					} else {
						document.getElementById("movetop").style.display = "none";
					}
				}

				// When the user clicks on the button, scroll to the top of the document
				function topFunction() {
					document.body.scrollTop = 0;
					document.documentElement.scrollTop = 0;
				}
			</script>
	
	<script>
			$(function() {
				$('.navbar-toggler').click(function() {
					$('body').toggleClass('noscroll');
				})
				$("#btup").click(function(){
					var formData = new FormData($("#updatePicForm")[0]);
					$.ajax({
						async : true,
						url : "${pageContext.request.contextPath}/EmployeesController?op=updatePic",
						type : "POST",
						data : formData,
						contentType : false,
						processData : false,
						success : function(emp) {
							var path = emp.empPicture;
							$("#myModal").modal('hide');
							$("#empImg").attr("src","${pageContext.request.contextPath}/EmployeesController?op=getPic&fileName="+path+"&a=" + new Date().getTime());
						},
						error : function() {
							alert("异步请求失败");
						}
					})
				})
				
				//获取表格数据
				$.post("${pageContext.request.contextPath }/RecordsController",{op:"queryAllRecordsId"},function(datas){
					showData(datas);
				},"json")
			})
			
			function showData(datas){
				$("#recordListBody").empty();
				$.each(datas,function(index,rescord){
					$("#recordListBody").append('<tr>'+
				  	         '<td>'+rescord.recordId+'</td>'+
					         '<td>'+rescord.beginTime.substring(0,rescord.beginTime.length-2)+'</td>'+
					         '<td>'+(rescord.endTime == null ? "未打卡" : rescord.endTime.substring(0,rescord.endTime.length-2))+'</td>'+
					         '<td>'+(rescord.clockInDetails == 0 ? "正常" : rescord.clockInDetails == 1 ? "迟到" : rescord.clockInDetails == 2 ? "早退" : "旷工")+'</td>'+
					       '</tr>')
					
				})
			}
		</script>
		

</html>
<!-- // grids block 5 -->